<template>
	<div>
		<a-table :columns="columns" :data-source="data" bordered :loading="loading" :pagination="pagination"
			class="maincon">
			<template  slot="isColor" slot-scope="text, row">
				<span v-if="row.isColor == '1' || row.isColor == ''">停用</span>
				<span v-if="row.isColor == '2'">启用</span>
			</template >
			<span slot="action" slot-scope="text, record">
				<a-button type="link" @click="editRole(record,'edit')"> 编辑 </a-button>
				<a-popconfirm
				    title="确认停用此条数据?"
				    ok-text="是"
				    cancel-text="否"
				    @confirm="editIscolor(record)"
				  >
				    <a-button type="link" v-if="record.isColor == '1' || record.isColor == ''"> 启用 </a-button>
				  </a-popconfirm>
				<a-popconfirm
				    title="确认启用此条数据?"
				    ok-text="是"
				    cancel-text="否"
				    @confirm="editIscolor(record)"
				  >
				    <a-button type="link" v-if="record.isColor == '2'">  停用</a-button>
				  </a-popconfirm>
				
				<!-- <a-button type="link"> 启用 </a-button> -->
				<a-popconfirm
				    title="确认删除此条数据?"
				    ok-text="是"
				    cancel-text="否"
				    @confirm="deleteRole(record)"
				  >
				    <a-button type="link"> 删除 </a-button>
				  </a-popconfirm>
				
				<a-button type="link"  @click="editRole(record,'add')"> 复制添加色 </a-button>
			</span>
		</a-table>
		<div class="btn">
			<a-button type="primary" @click="remove"> 返回 </a-button>
		</div>
		<a-modal width="20%" :title="title" :visible="visible" @ok="btnOK" @cancel="handleCancel">
			<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-form-model-item label="销售色">
					<a-select label-in-value allowClear show-search :filterOption="false" style="width: 100%" @search="searchColor" @select="changeColor">
						<a-spin v-if="fetching" slot="notFoundContent" size="small" />
					   <a-select-option v-for="item in colorList"  :key="item.colorId">
					     {{ item.cname }}
					   </a-select-option>
					 </a-select>
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
</template>
<script>
	import {
		getNewStyleTypeSaleColor,
		deleteNewStyleTypeSale,
		updateNewStyleTypeSale,
		addNewStyleTypeSale,
		getJColorList
	} from '@api/spection/index'

	export default {
		name: 'salesColor',
		data() {
			return {
				fetching:false,
				colorList:[],
				title:'新增款式要求',
				typeStyle:'',
				username: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				data: [],
				loading: false,
				pagination: false,
				visible: false,
				form: {
					name: '',
					region: undefined,
					date1: undefined,
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					newStyColorlid:''
				},
				columns: [{
						title: '序号',
						dataIndex: '序号',
						key: '序号',
						customRender: (text, record, index) => {
							return index + 1
						}
					},
					{
						title: '销售色',
						dataIndex: 'stycolorName',
						key: 'stycolorName'
					},
					{
						title: '销售色状态',
						dataIndex: 'isColor',
						key: 'isColor',
						scopedSlots: {
							customRender: 'isColor'
						}
					},
					{
						title: '操作',
						key: 'action',
						scopedSlots: {
							customRender: 'action'
						}
					}
				]
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			changeColor(value){
				this.form.newStyColorlid = value.key
				this.form.colourid = value.key
			},
			searchColor(value){
				console.log(value)
				this.getJColorList(value)
			},
			async getJColorList(name){
				this.colorList = []
				const params = {
					"current":1,
					"size":100,
					'cname':name
				}
				this.fetching = true
				const res = await getJColorList(params)
				if (res.code == 200) {
					const data = res.data.records.map(e => e)
					this.colorList = data
					this.fetching = false
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('获取待办列表失败！')
					}
				}
			},
			async getList() {
				const res = await getNewStyleTypeSaleColor(this.$route.query.billNo)
				if (res.code == 200) {
					this.data = res.data
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('获取待办列表失败！')
					}
				}
				
			},
			async editRole(row,type) {
				this.form = {}
				this.typeStyle = type
				if (type == 'edit') {
					row.stycolorid = row.stycolorid
					this.form = {...row}
					this.title = '编辑款式要求'
				} else{
					this.form.billno = row.billno
					this.form.stycolorid = row.stycolorid
					this.form.isColor = '1'
					this.title = '新增款式要求'
				}
				//   this.roleForm = await getRoleDetail(id)
				this.visible = true // 为了不出现闪烁的问题 先获取数据 再弹出层
			},
			// 确定接口
			async btnOK() {
				this.visible = true
				if (this.typeStyle == 'edit') {
					try {
						this.form.username = this.username.value.phone
						this.form.jobNumber = this.username.value.workNo
						this.form.roleCodeList = this.username.value.roleCode
						this.form.sceneType = 'K01'
						const res = await updateNewStyleTypeSale(this.form)
						if (res.code == 200) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							if (res.msg) {
								this.$message.error(res.msg)
							} else {
								this.$message.error('编辑失败！')
							}
						}
						this.visible = false
					} catch (error) {
						console.log(error)
					}
				} else{
					this.form.username = this.username.value.phone
					this.form.jobNumber = this.username.value.workNo
					this.form.roleCodeList = this.username.value.roleCode
					this.form.sceneType = 'K01'
					const res = await addNewStyleTypeSale(this.form)
					if (res.code == 200) {
						this.$message.success(res.msg)
						this.getList()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('新增失败！')
						}
					}
					this.visible = false
				}
				
			}, 
			async editIscolor(row){
				this.form = row
				if(row.isColor == '1' || row.isColor == '' ){
					this.form.isColor = '2'
				}else{
					this.form.isColor = '1'
				}
				this.form.username = this.username.value.phone
				this.form.jobNumber = this.username.value.workNo
				this.form.roleCodeList = this.username.value.roleCode
				this.form.sceneType = 'K01'
				const res = await updateNewStyleTypeSale(this.form)
				if (res.code == 200) {
					this.$message.success(res.msg)
					this.getList()
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('编辑失败！')
					}
				}
			},
			// 取消
			handleCancel(e) {
				console.log(e)
				// this.$refs.ruleForm.resetFields();
				this.visible = false
			},
			// 删除接口
			async deleteRole(row) {
				this.form = row
				this.form.username = this.username.value.phone
				this.form.jobNumber = this.username.value.workNo
				this.form.roleCodeList = this.username.value.roleCode
				this.form.sceneType = 'K01'
				const res = await deleteNewStyleTypeSale(this.form)
				if (res.code == 200) {
					this.$message.success(res.msg)
					this.getList()
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('编辑失败！')
					}
				}
			},
			// 保存
			btn() {
				this.$router.push('/spection/Designlist/index')
			},
			remove() {
				this.$router.push({
					path:'/spection/Designlist/index',
					query: {
					  billNo: this.$route.query.billNo 
					}
				})
			}
		}
	}
</script>
<<style scoped lang=less>
	/deep/ .ant-table-thead > tr > th {
	text-align: center;
	}
	/deep/ .ant-table table {
	text-align: center;
	}
	.btn{
	margin: 20px 0 0 50%;
	}
	.maincon{
	margin: 60px;
	}
	</style>